<template>
	<view class="my-content">
		<!-- head -->
		<view class="header header-margin" @click="$utils.navigateTo('/my/my-info')">
			<u-avatar size="130" :src="src" class="left"></u-avatar>
			<view class="header-right">
				<view class="title">{{userName}}</view>
				<view class="txt">
					<VipIcon :index="vipType" color="#98979c"></VipIcon>
				</view>
			</view>
		</view>
		<!-- wallet -->
		<view class="wallet">
			<view class="vip-type">
				<image :src="vipDataList[vipTypes].image" mode="widthFix" class="vipImg" v-if="vipType!=0"></image>
				<view class="no-vip" @click="$utils.switchTab('/vip/vip')" v-else>您还不是会员，点击开通！</view>
			</view>
			<view class="wallet-bottom">
				<view class="left">
					<text>余额</text>
					<view class="money">￥<text>{{money}}</text></view>
				</view>
				<view class="right" @click="$utils.navigateTo('/wallet/wallet')">我的钱包</view>
			</view>
		</view>
		<!-- list my/quotationlog-->
		<u-cell-group class="list-group">
			<u-cell-item title="海报个性化" @click="$utils.navigateTo('/my/diy')"></u-cell-item>
			<u-cell-item title="历史报价单"  
			@click="on_quotationlog('/my/quotationlog--')"
			
			></u-cell-item>
			<u-cell-item title="条款与规则" @click="$utils.navigateTo('/agreement/list')"></u-cell-item>
			<u-cell-item title="设置" @click="$utils.navigateTo('/my/set')"></u-cell-item>
		</u-cell-group>
	</view>
</template>

<script>
	import mixin from "@/libs/mixin.js";
	import {
		getCardData
	} from '@/api/index.js'
	export default {
		mixins: [mixin],
		data() {
			return {
				src: '',
				userName: '用户中心',
				userDescription: '欢迎来到用户中心！',
				money: "0.00",
				vipType: 0,
				vipTypes: 0,
				vipDataList: [],
				getInfoBool: true
			}
		},
		onLoad() {
			this.getCardDataFun();
		},
		onShow() {
			this.getCardDataFun();
		},
		methods: {
			on_quotationlog(){
		       var level =0 ;
				for (var i = 0; i < this.level_content.length; i++) {
					if (this.level_content[i]==11) {
						level=1
					}  
				}
				if (level==0) {
					uni.showToast({
						title:'暂无权限访问',
						icon:'error'
					})
					return
				}  
				uni.navigateTo({
					url:'quotationlog'
				})
			},
			getCardDataFun() {
				if (this.getInfoBool) {
					getCardData({
						token: this.$store.state.app.token
					}).then(res => {
						if (res.list.err == 1) {
							this.$utils.redirectTo('/login/phone-login', {});
						} else {

							this.userName = res.list.userName;
							this.vipType = res.list.hy;
							this.money = res.list.money;
							this.src = res.list.img;
							this.vipDataList = res.list.vipDataList;
							this.vipTypes = res.list.vipTypes,
								this.userDescription = res.list.userDescription;
							this.level_content = res.list.level_content;
							 
							this.getInfoBool = true;
						}
					}).catch(err => {
						uni.showToast({
							title: err.msg,
							icon: 'none'
						})
					});
					this.getInfoBool = false;
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		overflow: hidden;

		.left {
			float: left;
		}

		.header-right {
			margin-left: 160rpx;

			.title {
				font-size: 34rpx;
				padding: 20rpx 0 10rpx;
			}

			.txt {
				font-size: 24rpx;
				color: #666;
			}
		}
	}

	.wallet {
		position: relative;
		height: 300rpx;
		margin-top: 30rpx;
		border-radius: 25rpx;
		color: #fff;
		background: linear-gradient(to right, #eeb115, #c17306);
		overflow: hidden;

		.vip-type {
			width: 60%;
			padding: 30rpx 0 0 30rpx;

			.vipImg {
				width: 100%;
			}

			.no-vip {
				height: 200rpx;
				line-height: 120rpx;
				background: #eee;
				border-radius: 15rpx;
				text-align: center;
				color: #999;
				font-size: 22rpx;
			}
		}

		.wallet-bottom {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			padding: 25rpx 0;
			background: linear-gradient(to right, #f6ba17, #c87807);
			box-shadow: 0 0 30rpx rgba(0, 0, 0, .4);
			overflow: hidden;

			.left {
				padding-left: 50rpx;
				font-size: 30rpx;

				.money {
					font-size: 40rpx;

					text {
						margin-left: 10rpx;
						font-size: 58rpx;
					}
				}
			}

			.right {
				margin-top: 14rpx;
				width: 200rpx;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 30rpx;
				text-align: center;
				border-radius: 50rpx 0 0 50rpx;
				color: #653a00;
				background: linear-gradient(to right, #ffe7b9, #f8be72);
			}
		}
	}

	.list-group {
		padding: 30rpx 0;

		/deep/ .u-cell {
			padding-left: 0;
			padding-right: 0;

			.u-cell_title {
				font-size: 32rpx;
				color: #333;
			}
		}
	}
</style>